<template>
  <div>
    <el-dialog
      title="诊断信息"
      :visible.sync="diagnoseDialog"
      :before-close="closDiagnoseDialog"
    >
      <el-form :rules="rules" label-width="100px">
        <el-form-item label="诊断信息" prop="diagnose">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="diagnose"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closDiagnoseDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirmDiagnoseDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-table
      ref="multipleTable"
      :data="registrationList"
      style="width: 100%"
      row-key="registrationId"
      lazy
    >
      <el-table-column prop="registrationId" label="挂号单 ID" />
      <el-table-column prop="doctorName" label="医生名" />
      <el-table-column prop="patientName" label="患者名" />
      <el-table-column prop="date" label="日期" />
      <el-table-column label="挂号状态">
        <el-table-column label="完成状态">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.isComplete === 0"
              >未完成</el-tag
            >
            <el-tag type="success" v-if="scope.row.isComplete === 1"
              >完成</el-tag
            >
            <el-tag type="success" v-if="scope.row.isComplete === 2"
              >诊断中</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="支付状态">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.isPayment === 0"
              >未完成</el-tag
            >
            <el-tag type="success" v-if="scope.row.isPayment === 1"
              >完成</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="预约状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isAppointment === 0">线下</el-tag>
            <el-tag type="success" v-if="scope.row.isAppointment === 1"
              >线上</el-tag
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.isComplete === 0"
            @click="handlerRegistration(scope.row)"
            >开始诊断</el-button
          >
          <el-button
            v-show="scope.row.isComplete === 2"
            @click="showDiagnoseDialog(scope.row)"
            >诊断</el-button
          >
          <el-button
            v-show="scope.row.isComplete === 1"
            @click="complete(scope.row)"
            >完成</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      registrationList: [],

      diagnoseDialog: false,

      diagnose: "",
      id: "",
      status: 0,

      rules: {
        diagnose: [{ required: true, trigger: "blur" }],
      },
    };
  },
  methods: {
    initWebSocket: function () {
      //   var url = "ws://localhost:8082/his/admin/websocket";
      if ("WebSocket" in window) {
        this.websocket = new WebSocket(
          process.env.VUE_APP_BASE_API.replace("http://", "ws://") +
            "/websocket/" +
            localStorage.getItem("userId")
        );
        this.websocket.onmessage = this.websocketOnmessage;
        this.websocket.onerror = this.websocketOnerror;
        this.websocket.onopen = this.websocketOnopen;
        this.websocket.onclose = this.websocketClose;

        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = this.onbeforeunload;
      } else {
        alert("当前浏览器不支持WebSocket!!!");
      }
    },
    // 连接成功后调用
    websocketOnopen: function () {
      console.log("WebSocket连接成功");
    },
    // 发生错误时调用
    websocketSend: function (e) {},
    // 给后端发消息时调用
    websocketSend: function (e) {
      console.log(e);
    },
    // 接收后端消息
    // vue 客户端根据返回的cmd类型处理不同的业务响应
    websocketOnmessage: function (e) {
      this.registrationList.push(JSON.parse(e.data));
    },
    // 关闭连接时调用
    websocketClose: function (e) {
      // console.log(e.code);
    },

    doSelectAll() {
      this.$store
        .dispatch("registration/selectAllDoctor", {
          obj: {
            isComplete: 0,
          },
          page: 0,
          pageSize: 0,
        })
        .then((res) => {
          this.registrationList = res.list;
          this.total = res.total;
        });
    },

    showDiagnoseDialog(value) {
      this.diagnose = value.diagnose;
      this.id = value.registrationId;
      value.isComplete = 1;
      this.diagnoseDialog = true;
    },
    closDiagnoseDialog() {
      this.diagnoseDialog = false;
    },

    handlerRegistration(value) {
      value.isComplete = 2;
      this.id = value.registrationId;
      this.handleConfirmUpdateDialog(value);
    },
    complete(value) {
      this.registrationList.shift()
      this.handleConfirmUpdateDialog(value);
    },
    handleConfirmDiagnoseDialog() {
      this.status = 1;
      this.$store.dispatch("registration/update", {
        diagnose: this.diagnose,
        registrationId: this.id,
      });
      this.closDiagnoseDialog();
    },
    handleConfirmUpdateDialog(value) {
      this.$store.dispatch("registration/update", value);
    },
  },
  created() {
    this.doSelectAll();
  },
  mounted() {
    this.initWebSocket();
  },
  destroyed() {
    this.websocketClose();
  },
};
</script>

<style scoped>
</style>